<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>

<body>
    <div id="app">
        {{name}} {{0?'存在':'不存在'}}
        <!-- 数据只有在app中生效，其他地方不生效 -->
        <ul>
            <li v-for="(item, index) in list">
                <b v-if='index==1'>{{item}}</b>
                <!-- v-if 用于判断
                    需要和v-else一起使用，
                    或者和v-else-if一起使用
                -->
                <b v-else-if='index==2'>{{item}}</b>
                <b v-else>
                    否则无
                </b>
            </li>
            <!-- v-for 是一个指令，用于渲染的指令 -->
            <!-- 指令是写在标签上的语法 -->
            <!-- v-if后可以直接洗条件，符合条件的渲染，否则不渲染，不渲染，就没有该标签  -->
            <!-- v-show 后可以直接洗条件，符合条件的渲染，否则不渲染，不渲染，有该标签，不过是隐藏的 （dispaly：none）-->

        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                name: '崔幸运想喝奶茶', //name必须放在data中，不能是全局变量，否则报错   //
                list: [1, 2, 3, 4]
            }
        });
    </script>
</body>

</html>